import * as React from 'react';

export interface ProgressProp {
  elapsed: string;
  played: number;
  loaded: number;
  duration: number;
  total: string;
  onSeekMouseDown: React.EventHandler<React.MouseEvent<HTMLProgressElement>>;
  onSeekMouseUp: React.EventHandler<React.MouseEvent<HTMLProgressElement>>;
  onSeekChange: React.EventHandler<React.MouseEvent<HTMLProgressElement>>;
}

export default class Progress extends React.Component<ProgressProp, {}> {
  render() {
    return (
      <div className="progress">
        {/* Elapsed time */}
        <span className="player__time-elapsed">{this.props.elapsed}</span>
        {/* Progress Bar */}
        <progress 
          max={1}
          value={this.props.played} 
          onMouseDown={this.props.onSeekMouseDown}
          onMouseUp={this.props.onSeekMouseUp}
          onChange={this.props.onSeekChange}
        />
        {/* Total time */}
        <span className="player__time-total">{this.props.total}</span>
      </div>
    );
  }
}
